<template>
  <div class="app-container">
    <el-row>
      <el-input
        v-model="query.s"
        prefix-icon="el-icon-search"
        style="width: 350px"
        placeholder="搜索关键字"
        @keyup.enter.native="loadData"
      ></el-input>
    </el-row>
    <el-row>
      <el-table
        :data="list.slice((curPage - 1) * pageSize, curPage * pageSize)"
        style="width: 100%"
        @row-dblclick="dbclick"
      >
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="名称" label="名称"> </el-table-column>
        <el-table-column prop="参数值" label="参数值"> </el-table-column>
        <el-table-column prop="类别" label="类别"> </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="sizeChage"
          @current-change="currentChange"
          :current-page="curPage"
          :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.length"
        >
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import { SoftVersion } from "@/api/commonApi";
import { sysSetting, edSetting } from "@/api/commonApi";
@Component({
  name: "sys-set",
})
export default class extends Vue {
  private created() {
    this.loadData();
  }

  private dbclick(item: any) {
    this.$prompt("请输入参数值", item.名称, {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputValue: item.参数值,
      closeOnClickModal: false,
      inputPattern: /\w{1,}/,
      inputErrorMessage: "请输入合法字符",
    })
      .then(async (val: any) => {
        if (val.action != "confirm") return;
        item.参数值 = val.value;
        edSetting(item);
        this.$message({
          type: "info",
          message: "修改成功！",
        });
      })
      .catch(() => {
        // this.$message({
        //   type: "info",
        //   message: "取消输入",
        // });
      });
  }
  private pageSize: number = 10;
  private curPage: number = 1;
  private sizeChage(val: number) {
    this.pageSize = val;
    this.curPage = 1;
  }

  private currentChange(val: number) {
    this.curPage = val;
  }

  private query: any = {
    s: "",
  };

  private list: Array<any> = [];
  private async loadData() {
    let d: any = await sysSetting(this.query);
    this.list = d.data;
  }
}
</script>